<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--整个div里面所有地方都可以使用data里面的值-->
<!--
知识1：占位符{{data对象的属性名}}
知识2：占位符{{表达式}}
-->
<div id="box">
    <h1>学生的姓名是：{{name.substring(0,2)}}</h1>
    <h1>学生的年龄是：{{age+1}}</h1>
    <h1>学生的性别是：{{sex == 1 ? '男' : '女'}}</h1>

<!--    单向绑定-->
<!--    v-bind:value简写为 :value -->
    用户名：<input type="text" :value="qqid" />

<!--    双向绑定-->
<!--     v-model:value 简写为：v-model -->
    邮箱：<input type="email" v-model="email">

    <button v-on:click="show">点击中大奖</button>
</div>

<!--引入vue的js文件-->
<script src="js/vue.2.7.14.js"></script>
<script>
    // 创建一个ViewModel对象，这里简称vm
    // 问题1：把vm和视图模板h1标签进行绑定
    // model，立马想到data
    let vm = new Vue({
        el:'#box',
        data:{
            name:'西门吹雪', age:20, sex:1, qqid:'123456', email:'123456@qq.com'
        },
        methods:{
            show() {
                alert('中500万了！！')
                // 核心技术，在方法里面获取data里面的属性值
                alert("姓名是：" + vm.name)
                alert("年龄是：" + this.age)
                // 写
                this.qqid = '765432@qq.com';
            }
        }
    });
    console.log(vm)

</script>
</body>
</html>